<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app{
            width: 400px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
        }

        .wrap{
            display: flex;
        }
        .wrap span{
            flex: 1;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="filterText" placeholder="请输入查询的用户">
        <ul>
            <li class="wrap" v-for="(item,index) in filterList" :key="index">
                <span>{{item.name}}</span>
                <span>{{item.age}}</span>
                <span>{{item.wife}}</span>
            </li>
        </ul>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;

    new Vue({
        el:"#app",
        data:{
            filterText:"",//过滤的字段
            list:[ //列表数据
                {name:"达姆", age:18, wife:"冬雨"},
                {name:"达姆1", age:14, wife:"冬雨"},
                {name:"达姆6", age:16, wife:"冬雨"},
                {name:"达姆7", age:11, wife:"冬雨"},
                {name:"晓飞张", age:48, wife:"刘志远"},
                {name:"张天宇",age:38,wife:"闫新宇"},
                {name:"王思聪",age:58,wife:"王健林"}
            ]
        },
        computed:{
            filterList(){
                /*
                   1. 数组api是干嘛的:
                            filter可以对数组进行过滤
                   2. 参数有哪些 分别代表什么意思:
                            callback:同步的回调函数
                                item:数组中当前正在处理的元素。
                                index可选:正在处理的元素在数组中的索引。
                                array可选:调用了 filter 的数组本身。
                            thisArg可选:callback执行时其内部的this指向
                   3. 返回值是什么
                            一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组
                   4. 是否影响老数组
                            否
               */

                return this.list.filter((item)=>{
                    //去找list中name包含filterText的数据
                    return item.name.includes(this.filterText)
                })
            }
        }
    })
</script>
</html>